<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up | Sencare - shared on themelock.com</title>
<link rel="apple-touch-icon" sizes="57x57" href="assets/images/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="assets/images/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="assets/images/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/images/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="assets/images/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="assets/images/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="assets/images/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="./assets/images/favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/mobile.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link href="assets/css/owl.carousel.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/owl.theme.default.min.css" rel="stylesheet" type="text/css">
</head>
<body>
 <!-- SIGN UP FORM SECTION -->
<section class="login-form sign-up-form d-flex align-items-center">
    <div class="container" id="app">
        <div class="login-form-title text-center">
            <figure class="login-page-logo">
                <a class="navbar-brand mr-0 p-0" href="index.html"><img src="assets/images/sencare-logo2.png" alt="" class="img-fluid"></a>
            </figure>
            <h2>Create Your FREE Account</h2>
        </div>
        <div class="login-form-box">
            <div class="login-card">
                <form>
                    <div class="form-group">
                        <input v-model="opName" class="input-field form-control" type="text"  :disabled="true" id="exampleInputName1" placeholder="姓名" required>
                    </div>
                    <div class="form-group">
                        <input v-model="opPhone" class="input-field form-control" type="phone"  id="exampleInputEmail1" placeholder="手机号" required>
                    </div>
                    <div class="form-group">
                        <input v-model="opAddress" class="input-field form-control" type="text"  :disabled="true" placeholder="家庭住址" required>
                    </div>
                    <div class="form-group">
                        <input  class="input-field form-control" type="password"  id="exampleInputPassword1" placeholder="默认8个8" >
                    </div>
                    <div class="form-group">
                        <el-upload class="upload-demo" v-model="opCard" action="/manage/older/IDCardOCR"
                                   :on-success="handleSuccess" :file-list="fileList" list-type="picture">
                            <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>
                    </div>
                    <button @click="submit" type="submit" class="hover-effect btn btn-primary mb-0">Register Now</button>
                </form>
            </div>
            <div class="join-now-outer text-center">
                <a href="login.html">Already have an account?</a>
            </div>
        </div>   
    </div>
</section>
    <script src="assets/js/animations.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/jquery-3.6.0.min.js"></script>
    <script src="assets/js/popper.min.js"></script>
    <script src="assets/js/custom-script.js"></script>
    <script src="assets/js/owl.carousel.js"></script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="assets/js/text-animations.js"></script>
    <script src="assets/js/carousel.js"></script>
 <script src="js/vue.js"></script>
 <script src="element-ui/lib/index.js"></script>
 <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
 <script src="js/axios-0.18.0.js"></script>
 <script>

     new Vue({
         el: "#app",
         data() {
             return {
                 opPassword:null,
                 opPhone:null,
                 opName:null,
                 opAddress:null,
                 opCard:null,
                 opIdcard:null,
                 opNative:null,
                 opBirthday:null,
                 fileList:[],
             }
         },
         methods: {
             // 上传成功 回调函数
             handleSuccess (response, file, fileList) {
                 if (response.code == '500') {
                     this.$message.error(response.msg)
                     return;
                 }
                 console.log(response);
                 var data = {
                     name: response.newFileName,
                     url: response.url
                 }
                 this.fileList.push(data)
                 this.opCard = response.url
                 this.opPhoto = response.opPhoto
                 this.opAge = response.opAge
                 this.opIdcard = response.IdCardResultVO.idNum
                 this.opNative = response.IdCardResultVO.address
                 this.opBirthday = response.IdCardResultVO.birth
                 this.opName = response.IdCardResultVO.name
                 this.opAddress = response.IdCardResultVO.address
             },
             submit() {
                 var _this = this;
                 axios({
                     method: "post",
                     url: "http://localhost:8080/manage/older",
                     data: {
                         opPhone: _this.opPhone,
                         opPassword: _this.opPassword,
                         opCard:_this.opCard ,
                         opPhoto:_this.opPhoto ,
                         opAge:_this.opAge ,
                         opIdcard:_this.opIdcard ,
                         opNative:_this.opNative ,
                         opBirthday: new Date(_this.opBirthday.replaceAll("/","-")) ,
                         opName: _this.opName ,
                         opAddress:_this.opAddress ,
                     }
                 }).then(res =>res.data).then(res=>{
                     if (res.code=='200'){
                         location.href = "http://localhost:8080/web/index.html";
                         _this.$message({
                             type: 'success',
                             message: '欢迎'+res.data.opName+'!'
                         });
                         localStorage.setItem("FrontUser", JSON.stringify(res.data));
                     }else{
                         _this.$message({
                             type: 'info',
                             message: res.msg
                         });

                     }
                 })
             }
         }

     })

 </script>
</body>

</html>
    